<template>
  <swiper :options="swiperOption" ref="swiper">
    <div class="mine-scroll-pull-down" v-if="pullDown">
      <me-loading :text="pullDownText" inline ref="pullDownLoading"></me-loading>
    </div>
    <swiper-slide>
      <slot></slot>
    </swiper-slide>

    <div class="mine-scroll-pull-up" v-if="pullUp">
      <me-loading :text="pullUpText" inline ref="pullUpLoading" />
    </div>

    <div class="swiper-scrollbar" v-if="scrollbar" slot="scrollbar"></div>
  </swiper>
</template>

<script>
  import {swiper, swiperSlide} from 'vue-awesome-swiper';
  import MeLoading from 'base/loading';
  import {
    PULL_DOWN_HEIGHT,
    PULL_DOWN_TEXT_END,
    PULL_DOWN_TEXT_ING,
    PULL_DOWN_TEXT_INIT,
    PULL_DOWN_TEXT_START,
    PULL_UP_HEIGHT,
    PULL_UP_TEXT_END,
    PULL_UP_TEXT_ING,
    PULL_UP_TEXT_INIT,
    PULL_UP_TEXT_START

  } from './config';

  export default {
    name: 'MeScroll',
    components: {
      swiper,
      swiperSlide,
      MeLoading
    },
    props: {
      scrollbar: {
        type: Boolean,
        default: true
      },
      data: {
        type: [Array, Object]
      },
      // 是否开启下拉功能
      pullDown: {
        type: Boolean,
        default: false
      },
      pullUp: {
        type: Boolean,
        default: false
      }
    },
    watch: {
      // data() {
      //   this.update();
      // }
    },
    created() {
      this.init();
    },
    methods: {
      init() {
        // 是否正在下拉/上拉
        this.pulling = false;
        this.pullDownText = PULL_DOWN_TEXT_INIT;
        this.pullUpText = PULL_UP_TEXT_INIT;
        this.pullDownHeight = PULL_DOWN_HEIGHT;
        this.swiperOption = {
          direction: 'vertical',
          slidesPerView: 'auto', // 一页里能看到几张图片
          // 自由模式，幻灯片只能滚动固定的距离，滚动条随意滚动
          freeMode: true,
          setWrapperSize: true,
          scrollbar: {
            el: this.scrollbar ? '.swiper-scrollbar' : null,
            // 是否自动隐藏
            hide: true
          },
          on: {
            // 鼠标拖动会触发，但是，如果有一个加速的动作，页面自行滑动的部分不会触发
            sliderMove: this.scroll,
            touchEnd: this.touchEnd,
            transitionEnd: this.scrollEnd
          }
        };
      },
      // API
      update() {
        // this.$refs.swiper存在，this.refs.swiper.update()才执行
        this.$nextTick(() => {
          this.$refs.swiper && this.$refs.swiper.update();
        });
      },
      scrollToTop(speed, runCallbacks) {
        // slideTo 表示移动到指定的幻灯片处，页面中只有一个幻灯片
        this.$refs.swiper && this.$refs.swiper.swiper.slideTo(0, speed, runCallbacks);
      },

      scroll() {
        const swiper = this.$refs.swiper.swiper;
        // 控制"返回顶部"按钮的显示和隐藏
        this.$emit('scroll', swiper.translate, this.$refs.swiper.swiper);
        // 如果正在下拉（已经下拉，正在刷新，停止在固定的刷新高度）
        if (this.pulling) {
          return;
        }
        // 如果大于0表示下拉
        if (swiper.translate > 0) {
          // 是否开启下拉功能
          if (!this.pullDown) {
            return;
          }
          if (swiper.translate > PULL_DOWN_HEIGHT) {
            this.$refs.pullDownLoading.setText(PULL_DOWN_TEXT_START);
          } else {
            this.$refs.pullDownLoading.setText(PULL_DOWN_TEXT_INIT);
          }
        // 是否到达底部
        } else if (swiper.isEnd) {
          if (!this.pullUp) {
            return;
          }
          const totalHeight = parseInt(swiper.$wrapperEl.css('height'));
          const isPullUp = Math.abs(swiper.translate) + swiper.height - PULL_UP_HEIGHT > totalHeight;

          if (isPullUp) {
            this.$refs.pullUpLoading.setText(PULL_UP_TEXT_START);
          } else {
            this.$refs.pullUpLoading.setText(PULL_UP_TEXT_INIT);
          }
        }
      },
      scrollEnd() {
        this.$emit('scroll-end', this.$refs.swiper.swiper.translate, this.$refs.swiper.swiper, this.pulling);
      },
      // 下拉后松手，页面停止在某一高度
      touchEnd() {
        if (!this.pullDown) {
          return;
        }
        this.pulling = true;
        const swiper = this.$refs.swiper.swiper;

        if (swiper.translate > PULL_DOWN_HEIGHT) {
          if (!this.pullDown) {
            return;
          }
          swiper.allowTouchMove = false;
          swiper.setTransition(swiper.params.speed);
          swiper.setTranslate(PULL_DOWN_HEIGHT);
          swiper.params.virtualTranslate = true; // 定住不回弹
          this.$refs.pullDownLoading.setText(PULL_DOWN_TEXT_ING);
          this.$emit('pull-down', this.pullDownEnd);
        } else if (swiper.isEnd) {
          const totalHeight = parseInt(swiper.$wrapperEl.css('height'));
          const isPullUp = Math.abs(swiper.translate) + swiper.height - PULL_UP_HEIGHT > totalHeight;

          if (isPullUp) {
            // 如果开启了上拉功能
            if (!this.pullUp) {
              return;
            }
            this.pulling = true;
            swiper.allowTouchMove = false;
            swiper.setTransition(swiper.params.speed);
            swiper.setTranslate(-(totalHeight + PULL_UP_HEIGHT - swiper.height));
            swiper.params.virtualTranslate = true;
            this.$refs.pullUpLoading.setText(PULL_UP_TEXT_ING);
            this.$emit('pull-up', this.pullUpEnd);
          }
        } else if (swiper.translate <= PULL_DOWN_HEIGHT) {
          this.$emit('pull-down-transition-end');
        }
      },
      // 结束下拉
      pullDownEnd() {
        const swiper = this.$refs.swiper.swiper;

        this.pulling = false;
        this.$refs.pullDownLoading.setText(PULL_DOWN_TEXT_END);
        swiper.params.virtualTranslate = false;
        swiper.allowTouchMove = true;
        swiper.setTransition(swiper.params.speed);
        swiper.setTranslate(0);
        // 下拉结束页面回到原位时，将隐藏的header显示
        setTimeout(() => {
          this.$emit('pull-down-transition-end');
        }, swiper.params.speed);
      },
      pullUpEnd() {
        const swiper = this.$refs.swiper.swiper;

        this.pulling = false;
        this.$refs.pullUpLoading.setText(PULL_UP_TEXT_END);
        swiper.params.virtualTranslate = false;
        swiper.allowTouchMove = true;
      }
    }
  };
</script>

<style scoped lang="scss">
  .swiper-container {
    height: 100%;
    width: 100%;
    overflow: scroll;
  }
  .swiper-slide {
    height: auto;
  }
  .mine-scroll-pull-down {
    position: absolute;
    left: 0;
    bottom:100%;
    width: 100%;
    height: 100px;
  }
</style>
